<template>
  <view class="container">
    <!-- 搜索框增强版 -->
    <view class="search-box">
      <input 
        class="search-input" 
        placeholder="输入关键词搜索资讯" 
        :value="keyword"
        @input="onInput"
      />
      <image class="search-icon" src="/static/search.png" mode="aspectFit" />
    </view>

    <!-- 搜索提示 -->
    <view v-if="showSuggestions" class="suggestion-list">
      <text 
        v-for="(item, index) in suggestions" 
        :key="index"
        class="suggestion-item"
        @click="selectSuggestion(item)"
      >
        {{ item }}
      </text>
    </view>

    <!-- 热门搜索 -->
    <view class="hot-search">
      <text class="hot-title">热门搜索</text>
      <view class="hot-tags">
        <text 
          v-for="(item, index) in hotKeywords" 
          :key="index"
          class="hot-tag"
          @click="search(item)"
        >
          {{ item }}
        </text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      showSuggestions: false,
      hotKeywords: ['政策解读', '行业报告', '技术白皮书', '市场趋势'],
      suggestions: []
    }
  },
  methods: {
    onInput(e) {
      this.keyword = e.detail.value
      this.showSuggestions = !!this.keyword
      // 模拟搜索建议（实际应调用接口）
      this.suggestions = this.keyword ? 
        [`${this.keyword}相关解读`, `${this.keyword}政策`, `${this.keyword}技术`] : []
    },
    search(keyword) {
      uni.navigateTo({
        url: `/pages/search-result/search-result?keyword=${encodeURIComponent(keyword)}`
      })
    },
    selectSuggestion(item) {
      this.search(item)
    }
  }
}
</script>

<style>
.container {
  padding: 15px;
}

.search-box {
  background: #fff;
  border-radius: 20px;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  position: relative;
}

.suggestion-list {
  background: #fff;
  margin-top: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.suggestion-item {
  display: block;
  padding: 12px 15px;
  font-size: 14px;
  color: #333;
  border-bottom: 1px solid #eee;
}

.hot-search {
  margin-top: 30px;
}

.hot-title {
  font-size: 16px;
  color: #333;
  font-weight: 500;
  display: block;
  margin-bottom: 15px;
}

.hot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hot-tag {
  background: #f0f4ff;
  color: #1a73e8;
  padding: 8px 15px;
  border-radius: 15px;
  font-size: 13px;
}
</style>